'use client';

import { Box, Typography, Button, Paper } from '@mui/material';

export default function DebugPage() {
  return (
    <Box sx={{ p: 4, minHeight: '100vh', bgcolor: '#f5f5f5' }}>
      <Typography variant="h3" sx={{ mb: 4, color: '#1a1a1a' }}>
        🐛 DataOps 界面调试页面
      </Typography>
      
      <Paper sx={{ p: 3, mb: 3 }}>
        <Typography variant="h5" sx={{ mb: 2 }}>
          修改检查清单
        </Typography>
        
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Box sx={{ width: 20, height: 20, bgcolor: '#1a1a1a', borderRadius: '50%' }} />
            <Typography>导航栏深色背景 (#1a1a1a)</Typography>
          </Box>
          
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Box sx={{ 
              width: 20, 
              height: 20, 
              background: 'linear-gradient(135deg, #ff6b9d 0%, #74b9ff 100%)',
              borderRadius: '50%' 
            }} />
            <Typography>渐变背景 (粉色到蓝色)</Typography>
          </Box>
          
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
            <Box sx={{ width: 20, height: 20, bgcolor: '#1976d2', borderRadius: '50%' }} />
            <Typography>按钮蓝色 (#1976d2)</Typography>
          </Box>
        </Box>
      </Paper>
      
      <Paper sx={{ p: 3, mb: 3 }}>
        <Typography variant="h5" sx={{ mb: 2 }}>
          样式测试
        </Typography>
        
        {/* 深色导航栏样式测试 */}
        <Box sx={{ 
          p: 3, 
          mb: 2, 
          bgcolor: '#1a1a1a', 
          borderRadius: 2,
          display: 'flex',
          alignItems: 'center',
          gap: 2
        }}>
          <Typography sx={{ color: 'white', fontWeight: 600 }}>
            DataOps
          </Typography>
          <Typography sx={{ color: 'white', opacity: 0.8 }}>
            nav-seleced
          </Typography>
          <Typography sx={{ color: 'white', opacity: 0.6 }}>
            nav-default
          </Typography>
        </Box>
        
        {/* 渐变背景测试 */}
        <Box sx={{ 
          p: 3, 
          mb: 2, 
          background: 'linear-gradient(135deg, #ff6b9d 0%, #c44569 25%, #6c5ce7 50%, #74b9ff 100%)',
          borderRadius: 2,
          textAlign: 'center'
        }}>
          <Typography variant="h4" sx={{ color: 'white', mb: 1 }}>
            DataOps
          </Typography>
          <Typography sx={{ color: 'white', opacity: 0.9 }}>
            一个强大的语言模型微调数据集创建中心
          </Typography>
        </Box>
        
        {/* 按钮样式测试 */}
        <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
          <Button 
            variant="contained" 
            sx={{ 
              bgcolor: '#1976d2',
              color: 'white',
              '&:hover': { bgcolor: '#1565c0' }
            }}
          >
            创建项目
          </Button>
          <Button 
            variant="contained" 
            sx={{ 
              bgcolor: '#1976d2',
              color: 'white',
              '&:hover': { bgcolor: '#1565c0' }
            }}
          >
            搜索公开数据集
          </Button>
        </Box>
      </Paper>
      
      <Box sx={{ display: 'flex', gap: 2 }}>
        <Button 
          variant="contained" 
          onClick={() => window.location.href = '/'}
          sx={{ 
            bgcolor: '#1976d2',
            color: 'white',
            '&:hover': { bgcolor: '#1565c0' }
          }}
        >
          返回首页
        </Button>
        
        <Button 
          variant="outlined" 
          onClick={() => window.location.reload()}
        >
          刷新页面
        </Button>
        
        <Button 
          variant="outlined" 
          onClick={() => {
            // 清除所有缓存
            if (typeof window !== 'undefined') {
              localStorage.clear();
              sessionStorage.clear();
              window.location.reload();
            }
          }}
        >
          清除缓存并刷新
        </Button>
      </Box>
    </Box>
  );
}